﻿<template>
    <div v-cloak>
        <component is="style" />
        <van-empty v-if="mediaList.length==0" :description="emptyText"></van-empty>
        <div class="bg-white padding-lr-15 margin-bottom-8" style="font-size:14px;" v-for="(item,index) in mediaList">
            <div class="wrap color-333" v-if="item.miType==1" style="font-size:14px;line-height:22px;white-space:pre-line !important; padding:5px 0;">{{item.miTitle}}</div>
            <van-image v-else-if="item.miType==2" fit="cover" lazy :src="item.miUrl" style="width:auto; height:auto; max-width:100%; margin:0 auto;" v-on:click="photoBrowser(item.miUrl)"></van-image>
            <audio v-else-if="item.miType==3" :src="!!item.rawUrl?item.rawUrl:item.miUrl" preload="metadata" style="width:100%; margin:0 auto; display:block;" controls v-on:play="playMedia($event)">您的浏览器不支持音频播放</audio>
            <video v-else-if="item.miType==4" :src="!!item.rawUrl?item.rawUrl:item.miUrl" preload="metadata" style="width:auto; max-width:100%; height:auto; margin:0 auto; display:block;" controls v-on:play="playMedia($event)">您的浏览器不支持视频播放</video>
            <div class="wrap" v-else-if="item.miType==5" style="font-size:14px;line-height:22px;white-space:pre-line !important; padding:5px 0;">
                <div style="background-color:#F1F1F2;border-radius:5px; color:#333; text-decoration:none;" v-on:click="openUrl(item.miUrl)">{{item.miTitle}}</div>
            </div>
            <template v-else-if="item.miType==7">
                <div class="flex-row padding-4 wrap" style="background-color:#F1F1F2;border-radius:5px; color:#333; text-decoration:none;" v-on:click="open(item)">
                    <div style="padding:0 8px 0 4px;">
                        <i :class="[getFileIco(item.miTitle)]" style="font-size:2.2em !important;color:#00ffff;"></i>
                    </div>
                    <div class="flex-row-fill" style="line-height:20px !important;">
                        <div>{{item.miTitle}}</div>
                        <div class="color-888">{{item.miSize}}</div>
                    </div>
                </div>
            </template>
        </div>
        <slot></slot>
        <hxt-popup v-model="show" round style="height:95%;" getContainer="body">
            <iframe :src="url" width="100%" height="100%"></iframe>
        </hxt-popup>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'wx.media.detail',
            props: {
                mediaList: {
                    type: Array,
                    'default': function () {
                        return [];
                    }
                },
                emptyText: {
                    type: String,
                    'default': function () {
                        return '未添加内容';
                    }
                },
            },
            data: function () {
                var _this = this, optor = hxt.store.optor;
                return {
                    optor: optor,
                    browser: hxt.wxBrowser(), // 1：手机微信；4：小程序
                    show: false,
                    url: '',
                }
            },
            computed: {
                previewList: function () {
                    var list = [];
                    if (this.mediaList.length > 0) {
                        var obj = this.mediaList.filter(function (item) { return item.miType == 2 });
                        list = obj.map(function (item) { return item.miUrl });
                    };
                    return list;
                }
            },
            watch: {
               
            },
            activated: function () {

            },
            mounted: function () {

            },
            methods: {
                photoBrowser: function (url) {
                    var _this = this, index = _this.previewList.findIndex(function (item) { return item==url });
                    vant.ImagePreview({
                        images: _this.previewList,
                        startPosition: index,
                        closeable: true,
                    });

                },
                getFileIco: function (name) {
                    return hxt.getFileIco(name);
                },
                playMedia: function (evt) {
                    var el = evt.currentTarget
                        , audios = $('audio')
                        , videos = $('video');
                    $.each(audios, function (idx, item) {
                        if (item !== el) {
                            item.pause();
                        }
                    });
                    $.each(videos, function (idx, item) {
                        if (item !== el) {
                            item.pause();
                        }
                    });
                },
                openUrl: function (url) {
                    var _this = this;
                    _this.url = url;
                    _this.show = true;
                },
                open: function (obj) {
                    var _this = this;
                    var audios = $('audio')
                        , videos = $('video');
                    $.each(audios, function (idx, item) {
                        item.pause();
                    });
                    $.each(videos, function (idx, item) {
                        item.pause();
                    });
                    _this.optor.download(obj.miUrl, obj.miTitle, obj.miSize);
                    return;
                    wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                        wx.updateAppMessageShareData({
                            title: '文件', // 分享标题
                            desc: obj.aDesc, // 分享描述
                            link: obj.aKey, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: '', // 分享图标
                            success: function () {
                                // 设置成功
                                hxt.alert(JSON.stringify(res), '分享');
                            },
                            fail: function (err) {
                                hxt.alert(JSON.stringify(err), '分享失败');
                            }
                        })
                    });
                },
            },
            components: {

            }
        };
    })(window.$jscript.fn);
</script>
<style>
    .van-action-sheet__content{
        overflow:hidden !important;
    }
</style>